<template>
  <view class="resume-subPage">
    <custom-navbar title="个人荣誉" :auto-back="true" left-icon-color="#303133" />
    <up-gap height="30rpx" />
    <view class="flex items-center justify-end px-24rpx">
      <up-icon :name="Img7" width="25rpx" height="25rpx" />
      <text class="ml-12rpx text-[26rpx] text-[#1f50f2] font-bold">
        新增
      </text>
    </view>
    <up-gap height="30rpx" />
    <view class="block-box">
      <up-cell-group :border="false" :custom-style="{ padding: 0 }">
        <up-cell>
          <template #title>
            <text class="text-[26rpx] text-[#1d2129] font-medium">
              获奖名称
            </text>
          </template>
          <template #value>
            <view>
              <up-input v-model="formModel.name" :custom-style="{ border: 'none' }" font-size="26rpx"
                input-align="right" placeholder="请输入" />
            </view>
          </template>
        </up-cell>
        <up-cell>
          <template #title>
            <text class="text-[26rpx] text-[#1d2129] font-medium">
              获得时间
            </text>
          </template>
          <template #value>
            <view @tap="showPicker" style="font-size: 26rpx;">
              {{dateFormat(formModel.date)||'选择时间段'}}
             <!-- <up-input v-model="formModel.date" readonly :custom-style="{ border: 'none' }" font-size="26rpx"
                input-align="right" placeholder="选择时间段" /> -->
            </view>
          </template>
        </up-cell>
      </up-cell-group>
    </view>
    <view>
      <view class="h-190rpx pb-safe" />
      <view class="fixed bottom-0 left-0 w-100% flex items-center justify-between bg-#fff px-24rpx pt-24rpx pb-safe">
        <up-button :custom-style="{
            background: '#f3f4fa',
            color: '#1D2129',
            width: '338rpx',
            height: '82rpx',
            fontSize: '30rpx',
          }" shape="circle" text="删除" />
        <up-button :custom-style="{
            background: '#1f50f2',
            color: '#fff',
            width: '338rpx',
            height: '82rpx',
            fontSize: '30rpx',
          }" shape="circle" text="确定" @click="onClickSubmit" />
      </view>
    </view>
    <up-datetime-picker v-model="formModelDate" format="YYYY-MM-DD" :show="show" mode="date" @cancel="cancel"
      @confirm="confirm" />
  </view>
</template>

<script setup lang="ts">
  import { timeFormat } from 'uview-plus';
  import { HonorParams, customerHonorAdd } from '@/api/user/customer'
  // import Img7 from '@/static/images/userInfo/img-7.png';
  import { otherStore } from "@/store";
  const Img7 = "https://yiliao.test03.qcw800.com/static/images/userInfo/img-7.png";
  const formModel = reactive({
    name: '',
    date: '',
  });
  const formModelDate = computed({
    get() {
      return timeFormat(formModel.date, 'yyyy-mm-dd');
    },
    set(val) {
      formModel.date = val;
    },
  });
  const show = ref(false);
  const showPicker = () => {
    show.value = true;
  };
  const cancel = () => {
    show.value = false;
  };
  const confirm = () => {
    show.value = false;
  };
  const dateFormat = (time) => {
    if (!time) {
      return ""
    }
    let date = new Date(time);
    let year = date.getFullYear();
    // 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
    let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();


    return year + "." + month;

  }
  const resumeId = ref(0)
  const onClickSubmit = async () => {
    console.log('简历ID：：：', resumeId.value)
    if (resumeId.value == 0) {
      uni.showToast({ title: '简历异常' })
      return
    }
    let params : HonorParams = {
      resume_id: resumeId.value,   //简历ID
      time: formModel.date,
      name: formModel.name, //荣誉名称
    }
    console.log('参数：：：', params)
    let r = await customerHonorAdd(params)
    if (r > 0) {
      console.log(formModel)
      uni.navigateBack()
      // uni.redirectTo({
      //   url: '/pages/userinfo/resume-create?resume_id=' + resumeId.value
      // })
    } else {
      uni.showToast({
        title: '个人亮点更新到简历失败',
        icon: 'none'
      })
    }
  }
  onMounted((query) => {
    console.log('------', query)
  })
  onLoad((query : any) => {
    console.log('query---------', query)
    if (query.resumeId) {
      console.log('个人亮点页获取简历ID', query.resumeId)
      resumeId.value = query.resumeId
    }
  })
</script>

<script lang="ts">
  // import {otherStore} from "@/store";
  export default {
    options: {
      styleIsolation: 'shared',
    },
  };
</script>

<style lang="scss" scoped>
  .resume-subPage {
    .block-box {
      @apply mx-auto mb-24rpx w-[702rpx] shadow-[0rpx_6rpx_16rpx_0rpx_rgba(191, 191, 191, 0.26)] rounded-[20rpx] bg-#fff p-24rpx pt-0 pb-30rpx;

      :deep(.u-cell__body) {
        @apply px-0 py-12rpx min-h-96rpx;
      }

      :deep(.u-textarea__field) {
        @apply text-26rpx;
      }
    }
  }
</style>
